<template>
  <div class="home">
    <div class="home-detail container">
      <h3>当前浏览详情</h3>
      <div>
        <el-form label-width="80px" :model="formLabelAlign">
          <el-form-item label="用户">
            <el-input v-model="formLabelAlign.name"></el-input>
          </el-form-item>
          <el-form-item label="贴吧">
            <el-input v-model="formLabelAlign.region"></el-input>
          </el-form-item>
          <el-form-item label="频率">
            <el-input v-model="formLabelAlign.type"></el-input>
          </el-form-item>
          <el-form-item>
            <div>{{ content }}</div>
            <el-button type="primary">修改图片</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="home-new-msg container">
      <h3>最新记录</h3>
      <div v-for="item in list" class="msg-list">
        <div>{{ item.title }}</div>
        <div>{{ item.time }}</div>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import { getNewList, changeImg } from "@/api/index";
export default {
  name: "HomeView",
  components: {},
  data() {
    return {
      content: "很长很长很长的内容",
      timer: null,
      list: [
        { id: 1, title: "最近发生的爆炸新闻", time: "2023-10-30" },
        { id: 2, title: "最近发生的爆炸新闻", time: "2023-10-30" },
        { id: 3, title: "最近发生的爆炸新闻", time: "2023-10-30" }
      ],
      // 赋值属性字段可根据后端字段修改，但是需要与表单字段同步
      formLabelAlign: {
        name: "",
        region: "",
        type: ""
      }
    };
  },
  mounted() {
    this.time = setInterval(() => {
      this.getNews();
    }, 10000); // 时间调节 1秒 === 1000
  },
  methods: {
    // 请求数据的方法
    getNews() {
      // 接口请求以及赋值
      // getNewList(data).then(res=>{}) // res是返回的结果
      // this.list = res 里面返回的结果，就可以直接替换数据
      console.log(1);
    }
  },
  beforeDestroy() {
    clearInterval(this.timer);
  }
};
</script>
<style lang="scss" scoped>
.home {
  width: 100vw;
  height: 100vh;
  background: #409eff;
  padding-top: 20px;
  .home-detail {
    background: #fff;
    margin-bottom: 20px !important;
  }
  .home-new-msg {
    background: #fff;
    .msg-list {
      display: flex;
      margin-bottom: 10px;
      justify-content: space-between;
    }
    .msg-list:last-child {
      margin: 0;
    }
  }
  .container {
    width: 800px;
    margin: 0 auto;
    border-radius: 5px;
    padding: 20px;
  }
  h3 {
    margin-bottom: 10px;
  }
}
</style>
